<template>
  <view class="towstage">
    <scroll-view class="left" :scroll-y="true" scroll-with-animation :scroll-top="scrollTop">
      <view
        v-for="(item, index) in categoryList"
        :key="index"
        :class="'classTitle ' + (current == index ? 'actives' : '')"
        @tap="setCurrent(index)"
        :style="{ color: current == index ? colors : '' }"
      >
        <text>{{ item.name }}</text>
        <view class="classactive" v-if="current == index" :style="'background-color:' + colors">
        </view>
      </view>
    </scroll-view>
    <scroll-view :class="['right']" :scroll-y="true" :scroll-with-animation="true">
      <PubCardOne :dataList="dataList"></PubCardOne>
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import PubCardOne from '@/components/allCards/PubCardOne.vue'
const dataList = ref<Record<string, any>[]>([])
dataList.value = [
  {
    title: '精美五彩水果',
    goods_id: 201,
    money: '35.90',
    number: 1,
    hmoney: '45.90',
    img: 'https://cdn.pixabay.com/photo/2019/05/14/17/11/fruit-4202929_1280.png',
    youhui: true,
    baoyou: false,
    status: 1, //商品过期状态  0正常  1已失效
    stock: 600,
  },
  {
    title: '智利进口新鲜车厘子',
    goods_id: 202,
    money: '29.9',
    number: 75,
    hmoney: '39.90',
    img: 'https://cdn.pixabay.com/photo/2016/10/30/18/01/apple-1783882_1280.png',
    youhui: false,
    baoyou: true,
    status: 0, //商品过期状态  0正常  1已失效
    stock: 100,
  },
  {
    title: '伊犁冰淇淋',
    type: 3,
    goods_id: 203,
    money: '152.00 ',
    number: 1,
    hmoney: '162.00',
    img: 'https://cdn.pixabay.com/photo/2016/03/23/15/00/ice-cream-1274894_1280.jpg',
    youhui: true,
    baoyou: true,
    status: 0, //商品过期状态  0正常  1已失效
    stock: 200,
  },
  {
    title: '黑美人西瓜5kg',
    type: 6,
    goods_id: 204,
    money: '52.00 ',
    number: 1,
    hmoney: '99.00 ',
    youhui: false,
    baoyou: false,
    stock: 100,
    img: 'https://cdn.pixabay.com/photo/2017/06/02/18/24/watermelon-2367029_1280.jpg',
    status: 0, //商品过期状态  0正常  1已失效
  },
]

const categoryList = ref<Record<string, any>[]>([])
//分类列表
categoryList.value = [
  {
    id: 1,
    name: '空调清洗',
  },
  {
    id: 2,
    name: '家电清洗',
  },
  {
    id: 3,
    name: '空调清洗',
  },
  {
    id: 4,
    name: '空调清洗',
  },
  {
    id: 5,
    name: '空调清洗',
  },
  {
    id: 6,
    name: '空调清洗',
  },
]

// 处理当前的内容

const current = ref(0)
const scrollTop = ref(0)
const colors = ref('#fa436a')
const setCurrent = (index: any) => {
  console.log(index)
  //设置tab
  scrollTop.value = index * 20
  current.value = index
  if (index <= 2) {
    scrollTop.value = 0
  }
}
</script>

<style lang="scss">
@use './index.scss';
</style>
